<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>客服对话</title>
  <style>
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    .chat-container {
      max-width: 600px;
      margin: 20px auto;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .chat-box {
      height: 400px;
      border: 1px solid #ddd;
      padding: 10px;
      overflow-y: auto;
      margin-bottom: 20px;
    }

    .chat-box p {
      margin: 0 0 10px 0;
      font-size: 16px;
    }

    .user-message {
      text-align: right;
      color: #007bff;
    }

    .bot-message {
      color: #444;
    }

    .input-area {
      display: flex;
      margin-bottom: 10px;
    }

    .input-area textarea {
      flex-grow: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-right: 5px;
    }

    .input-area button {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .input-area button:hover {
      background: #0056b3;
    }

    .emoji-picker {
      margin-top: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 5px;
      display: none;
      /* Initially hidden */
    }

    .emoji-picker button {
      margin: 2px;
      padding: 5px;
      border: none;
      border-radius: 5px;
      background: #f5f5f5;
      cursor: pointer;
    }

    .emoji-picker button:hover {
      background: #eaeaea;
    }

    .emoji-button {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="chat-container">
    <h1>客服对话</h1>
    <div class="chat-box" id="chat-box">
      <p class="bot-message">欢迎来到我们的喜悦手表网【官网】：中国最大的正品名表商城客服中心！请问有什么可以帮助您的？</p>
    </div>
    <div class="input-area">
      <textarea id="user-input" placeholder="输入您的问题..."></textarea>
      <button class="emoji-button" onclick="toggleEmojiPicker()">😀</button>
      <div class="emoji-picker" id="emoji-picker">
        <button onclick="addEmojiToInput('😀')">😀</button>
        <button onclick="addEmojiToInput('😁')">😁</button>
        <button onclick="addEmojiToInput('😂')">😂</button>
        <button onclick="addEmojiToInput('🤣')">🤣</button>
        <!-- Add more emojis as needed -->
      </div>
      <button onclick="sendMessage()">发送</button>
    </div>
  </div>

  <script>
    var chatBox = document.querySelector('.chat-box');
    var userInput = document.getElementById('user-input');
    var emojiPicker = document.getElementById('emoji-picker');

    function displayMessage(text, className) {
      var messageElement = document.createElement('p');
      messageElement.textContent = text;
      messageElement.className = className;
      chatBox.appendChild(messageElement);
      chatBox.scrollTop = chatBox.scrollHeight;
    }

    function sendMessage() {
      var userText = userInput.value.trim();
      if (userText === '') return;

      displayMessage(userText, 'user-message');
      userInput.value = ''; // 清空输入框

      setTimeout(function () {
        var botResponse = getBotResponse(userText);
        displayMessage(botResponse, 'bot-message');
      }, 1000);
    }

     // 根据用户输入的关键字返回对应的信息
      function getBotResponse(userText) {
        // 这里是一些简单的关键字和对应的回答
        var responses = {
          '价格': '我们的产品价格非常优惠，具体价格请咨询客服。',
          '售后': '我们提供7天无理由退换货服务，更多售后政策请查看这里。',
          '支付': '我们支持支付宝、微信支付等多种支付方式。',
          '发货': '下单后，我们会在24小时内发货，具体到货时间取决于物流速度。',
          '退货': '商品在不影响二次销售的情况下，支持7天无理由退货。',
          '保修': '我们的产品提供一年质保服务，具体保修条款请咨询客服。',
          '购买': '您可以直接在我们的官方网站上下单购买，或者联系我们的销售代表。',
          '优惠券': '请关注我们的官方活动，我们会不定期发放优惠券和促销信息。',
          '积分': '会员积分可以在积分商城中兑换商品或优惠券，具体兑换规则请查看积分页面。',
          '真伪': '我们保证所有销售的产品均为正品，支持官方验证。',
          '尺码': '请参考商品详情页的尺码表选择适合您的尺码，如有不确定，可以打我们的人工电话123456789。',
          '色差': '我们的商品图片均为实物拍摄，但由于显示器差异，可能会有轻微色差。',
          '会员': '您可以在我们的网站首页点击注册，按照提示填写信息即可成为会员。',
          '账户': '如果您遇到账户登录或其他相关问题，请联系我们的人工电话123456789获取帮助。',
          '联系': '我们的客服热线是400-123-4567，您也可以通过在线客服系统与我们联系。',
          '发票': '下单时请在备注中注明发票信息，我们将按照您的要求开具发票。',
          '品牌': '喜悦手表网【官网】：中国最大的正品名表商城客服中心',
          // ... 其他关键字和回答 ...
        };

        // 将用户输入转换为小写，以便进行不区分大小写的匹配
        userText = userText.toLowerCase();

        // 检查用户输入中是否包含关键字
        for (var key in responses) {
          if (userText.includes(key)) {
            return responses[key];
          }
        }

        // 如果没有匹配的关键字，返回默认回答
        return '很抱歉，我不太明白您的问题，可以尝试其他问题吗？';
      }
      function toggleEmojiPicker() {
          emojiPicker.style.display = emojiPicker.style.display === 'none' ? 'block' : 'none';
        }

        function addEmojiToInput(emoji) {
          userInput.value += emoji;
        }
  </script>
</body>

</html>